import React, { useState } from 'react';
import {Button, Form, Tree} from 'antd';
import SelectLayoutArea from "../Layout/SelectLayoutArea";
import API from '../../api/api'
import moveData from "../../api/move/moveData";
let config = require('../../util/config').config

export default function MoveModuleAndFile(props){

    let hasFlashed = false

    const newTreeData = [];

    //当前节点key值
    const [selectedKeys, setSelectedKeys] = useState([props.moveNode.key]);

    //是否有选中节点
    const [selected, setSelected] = useState(false);

    //选中的节点信息
    const [selectedParentNode,setSelectedParentNode] = useState(null)

    let layoutParams = null;
    //将form表单引入该对象
    const [form] = Form.useForm();

    if(props.moveNode.type == config.article_d || props.moveNode.type == config.file_d || props.moveNode.type == config.page){

        //如果false说明未选择树形节点
        if(selected==true){
            layoutParams = API.getLayout("folder-d",selectedKeys);
        }
    }

    const onFinish=(values)=>{
        if(props.moveNode.type==config.folder_d){
            values.TYPE = "folder-d"
        }else if(props.moveNode.type == config.article_d){
            values.TYPE = "article-d"
        }else if(props.moveNode.type==config.file_d){
            values.TYPE = "file-d"
        }else if(props.moveNode.type==config.page){
            values.TYPE = "page"
        }else if(props.moveNode.type==config.file){
            values.TYPE = "file"
        }else if(props.moveNode.type==config.article){
            values.TYPE = "article"
        }else if(props.moveNode.type==config.folder){
            values.TYPE = "folder"
        }
        if(selected==false || props.moveNode.key==selectedParentNode.key){
            alert("未选择节点")
            return
        }
        values.NEW_PARENT_ID = selectedParentNode.key
        values.NEW_PARENT_TYPE = selectedParentNode.moduleType
        values.NAME = props.moveNode.name
        values.ID = props.moveNode.key

        if( props.moveNode.type == config.article_d || props.moveNode.type==config.file_d || props.moveNode.type==config.page ){
            values.NEW_LAYOUT_AREA = localStorage.getItem("layoutArea")
        }
        console.log("info:",values)
        if(API.moveData(values)=="ok"){
            if(!hasFlashed){
                //只有返回成功后，才会置父组件的状态值为true，即Modal关闭后实现列表刷新
                props.result(true)
                //执行上一步后，再本组件也加一个标记，来标识已经重置了父组件的刷新状态值status
                hasFlashed = true;
            }
        }
    }

    const onReset=()=>{
        form.resetFields();
    }

    const onSelect = (selectedKeysValue, info) => {
        if(info.selected==true){
            setSelected(true)
        }else {
            setSelected(false)
        }
        console.log('onSelect', info,selectedKeysValue);
        setSelectedParentNode(info.node);
        setSelectedKeys(selectedKeysValue);
    };

    const updateField = (treeData,moveDataRenderTree)=>{
        for(let i=0;i<moveDataRenderTree.length;i++){
            let children = []
            if(moveDataRenderTree[i].CHILDREN.length>0){
                updateField(children,moveDataRenderTree[i].CHILDREN)
            }
            if(props.moveNode.type==config.folder_d || props.moveNode.type==config.file_d || props.moveNode.type==config.article_d || props.moveNode.type==config.page){
                if(moveDataRenderTree[i].MODULE_TYPE=="folder-d" && moveDataRenderTree[i].SELECT_FLAG=="true"){
                    moveDataRenderTree[i].DISABLED=false
                }else {
                    moveDataRenderTree[i].DISABLED=true
                }
            }
            if(props.moveNode.type==config.article){
                if(moveDataRenderTree[i].MODULE_TYPE=="article-d" && moveDataRenderTree[i].SELECT_FLAG=="true"){
                    moveDataRenderTree[i].DISABLED=false
                }else {
                    moveDataRenderTree[i].DISABLED=true
                }
            }
            if(props.moveNode.type==config.file || props.moveNode.type==config.folder){
                if((moveDataRenderTree[i].MODULE_TYPE=="file-d" && moveDataRenderTree[i].SELECT_FLAG=="true") || moveDataRenderTree[i].MODULE_TYPE=="folder"){
                    moveDataRenderTree[i].DISABLED=false
                }else {
                    moveDataRenderTree[i].DISABLED=true
                }
            }
            treeData.push({
                key:moveDataRenderTree[i].MODULE_ID,
                moduleType:moveDataRenderTree[i].MODULE_TYPE,
                title:moveDataRenderTree[i].MODULE_NAME,
                layoutType:moveDataRenderTree[i].LAYOUT_TYPE,
                disabled:moveDataRenderTree[i].DISABLED,
                children:children,
            })
        }
    }

    if(props.moveDataRenderTree.length>0){
        //参数1：treeDate接收递归后的数据，参数2：要被递归的数据
        updateField(newTreeData,props.moveDataRenderTree);
    }
    console.log("newTreeData:",newTreeData)
    console.log("selectedKeys:",selectedKeys)
    return (
        <Form
            id="moveModuleAndFile"
            onReset={onReset}
            onFinish={onFinish}
            form={form}
            labelCol={{
                span: 4,
            }}
            wrapperCol={{
                span: 17,
            }}
        >
            <Form.Item
                name="newParentNode"
                label="移动至"
            >
                <Tree
                    checkStrictly={true}
                    checkable={false}
                    onSelect={onSelect}
                    selectedKeys={selectedKeys}
                    treeData={newTreeData}
                />
            </Form.Item>
            {
                (props.moveNode.type == config.file_d || props.moveNode.type == config.article_d || props.moveNode.type == config.page) && selected==true
                    ?
                    <Form.Item label="选择区域" name="layoutArea">
                        <SelectLayoutArea visible={true} type="insert" layoutParams={layoutParams}></SelectLayoutArea>
                    </Form.Item>
                    :
                    null
            }
            <Form.Item
                label="提交"
                name="commit"
            >
                <Button type="primary" htmlType="submit">
                    提交
                </Button>
                <Button htmlType="reset" style={{marginLeft:"1rem"}}>
                    重置
                </Button>
            </Form.Item>
        </Form>
    );
};


